<template>
  <div class="acc-transfer-container">
    <div class="header">
      <div class="img-back">
        <span class="img"></span>
      </div>
      <div class="span">
        <span>账户转账</span>
      </div>
    </div>
    <div class="transfer-list">
      <div class="line-row">
        <span class="span-left line-height">收款账户</span>
        <div class="income">
          <span class="income-word">{{payee}}</span>
          <span class="transfer-img"></span>
        </div>
      </div>

      <div class="line-row line-height">
        <span class="span-left">币种</span>
        <span id="r-span">{{currency}}</span>
      </div>

      <div class="line-row">
        <span class="span-left">转账金额</span>
        <input
          type="text"
          class="transfer-num"
          ref="infocus"
          maxlength="16"
          autofocus="autofocus"
          @blur.prevent="onblur"
          @focus="onFocus"
          v-model="transferNum"
          style="border:1px solid transparent; outline:none; text-align: right"
        />
        <div v-if="transferNum ? true : false" @click="resetInput">
          <i class="ic_closes"></i>
        </div>
        <el-button style="padding: 8px 6px" type="danger">全额转入</el-button>
      </div>

      <div class="capital-num">
        <span class="ctextw">{{textw}}</span>
        <span class="ctextm">{{textm}}</span>
      </div>

      <div class="line-row pay-acc line-height">
        <span class="span-left">付款账户</span>
        <div class="pay">
          <span class="pay-word" ref="payWord">{{payAcc}}</span>
          <span class="transfer-img"></span>
        </div>
      </div>

      <div class="line-row line-height">
        <span id="remain" class="span-left">可用余额</span>
        <span id="m-remain">{{allBalance}}</span>
      </div>
    </div>

    <el-button type="danger" round size="medium" class="btn_next">下一步</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      htmlStr: "温馨提示",
      allBalance: "9.9",
      payAcc: "62284806221890098",
      currency: "人民币",
      payee: "请选择",
      textw: "",
      textm: "",
      transferNum: ""
    };
  },
  watch: {
    transferNum(nInput, oInput) {
      if (nInput.indexOf(",") > 0) {
        return;
      }
      // this.capitalAmount(nInput)
    }
  },
  mounted() {},
  methods: {
    handleChange(value) {},
    transferAll() {
      this.transferAll = "100";
    },
    onblur() {
      let thisRef = this;
    },
    onFocus() {},
    resetInput() {
      this.clickReset = true;
      this.transferNum = "";
      this.$refs.infocus.focus();
    }
  }
};
</script>

<style lang='scss'>
body {
  margin: 0 0;
  padding: 0 0;
  background-color: #f3f3f3;
}
.acc-transfer-container {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0 0;
  padding: 0 0;
  .btn_next {
    width: 80%;
    margin: 20px 0;
  }
}
.header {
  position: relative;
  padding: 5px auto 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-bottom: #e3e3e4 solid 1px;
  background: white;
  height: 44px;

  span {
    font-size: 18px;
    text-align: center;
    align-self: center;
    width: auto;
    color: #647381;
    font-weight: 700;
  }
  .img-back {
    position: absolute;
    display: block;
    left: 0;
    bottom: 2px;
    background-color: transparent;
  }

  .img {
    display: block;
    background: url("../public/images/backicon_jhy.png") no-repeat;
    width: 20px;
    height: 20px;
    margin: 5px 4px;
    background-size: 26px 20px;
  }

  .line-height {
    line-height: 1;
    text-align: center;
    align-items: center;
  }
}

.income {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: white;
  text-align: center;
  line-height: 1;

  .income-word {
    font-size: 14px;
    color: #c2caca;
    align-self: center;
  }
}
.transfer-img {
  display: inline-block;
  margin: 0 -6px 0 0;
  background: url("../public/images/arrow2x.png") no-repeat;
  background-size: 12px 18px;
  width: 15px;
  height: 20px;
  margin-left: 8px;
}

.pay {
  flex-direction: row;
  display: flex;
  align-items: center;
  background-color: white;
}

.pay .pay-word,
#r-span {
  font-size: 14px;
  color: #5e93c6;
}
.m-remain {
  font-size: 14px;
  color: #333;
}
#pay-acc {
  margin-top: 10px;
}
.currency-input {
  width: 200px;
}
.ic_close {
  display: block;
  background: url("../public/images/ic_close.png") no-repeat;
  width: 15px;
  height: 15px;
  background-size: 15px 15px;
}
.ctextw {
  color: red;
}
.ctextm {
  color: #333;
}
.capital-num {
  padding: 0 120px 0 80px;
  text-align: right;
  background: white;
}
.el-button--danger {
  color: #fff;
  background-color: #ee827f;
  border-color: #ee827f;
  span {
    letter-spacing: 0.2em;
    margin-left: 4px;
  }
}

.span-left {
  position: relative;
  left: 0px;
}

.line-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  border-top: 0.6px #e3e3e4 solid;
  height: 46px;
  background-color: white;
  padding: 0 16px;
}
.transfer-list {
  margin-top: 20px;
}
div .pay-acc {
  margin-top: 15px;
}
.el-button span {
  font-size: 14px;
  border-radius: 3px;
}
</style>